Rules Manager for WPF | ComponentOne
In This Topic
    How to integrate Rules Manager with DataGrid
    In This Topic

    This is a step-by-step guide for applying conditional formatting to Microsoft DataGrid by integrating the Rules Manager control.

    Set Up Application

    1. Create a WPF application
    2. Drag and drop DataGrid and Rules Manager on the form
    3. Bind the data using ItemsSource property

    Define Value Converters

    Use the following code to implement two value converters.

    The CountryConverter displays a readable country name instead of a numeric ID whereas the DataGridValuetoBrushConverter converts a data value into a brush for cell styling.

    Integrate Rules Manager

    Use the following code to integrate Rules Manager with C1DataGrid and add/edit the rules.

    XAML
    Copy Code 
       <c1:C1RulesEngine x:Key="rulesEngine" RulesChanged="C1RulesEngine_RulesChanged">
      <c1:RulesEngineSegmentsRule Ranges="[OrderTotal]">
          <c1:RulesEngineSegment Value="500.00">
              <c1:RulesEngineStyle Background="#FFFDE7E9" Foreground="Red"/>
          </c1:RulesEngineSegment>
          <c1:RulesEngineSegment Value="3000.00">
              <c1:RulesEngineStyle Background="#FFF2F1A9" Foreground="Black"/>
          </c1:RulesEngineSegment>
          <c1:RulesEngineSegment>
              <c1:RulesEngineStyle Background="#FFDFF6DD" Foreground="Green"/>
          </c1:RulesEngineSegment>
      </c1:RulesEngineSegmentsRule>
  </c1:C1RulesEngine>

    Use the following code to apply cell styling based on rules applied.

    XAML
    Copy Code 
            <DataGrid x:Name="grid" AutoGenerateColumns="False" Grid.Column="0" SelectionChanged="grid_SelectionChanged">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"/>
                <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name"/>
                <DataGridTextColumn Binding="{Binding OrderTotal}" Header="Order Total"/>
                <DataGridTextColumn Binding="{Binding OrderCount}" Header="Order Count"/>
                <DataGridTextColumn Binding="{Binding CountryId, Converter={StaticResource CountryConverter}}" Header="Country"/>
                <DataGridTextColumn Binding="{Binding LastOrderDate, StringFormat={}\{0:dd/MM/yyyy\}}" Header="Last Order Date"/>
                <DataGridTextColumn Binding="{Binding LastOrderDate, StringFormat={}\{0:hh:mm\}}" Header="Last Order Time"/>
            </DataGrid.Columns>
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
                    <Setter Property="Background">
                        <Setter.Value>
                            <MultiBinding Converter="{StaticResource valueConverter}" ConverterParameter="Background">
                                <Binding RelativeSource="{RelativeSource Self}" />
                                <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=DataGrid}" />
                                <Binding Source="{StaticResource rulesEngine}" />
                            </MultiBinding>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <MultiBinding Converter="{StaticResource valueConverter}" ConverterParameter="Foreground">
                                <Binding RelativeSource="{RelativeSource Self}" />
                                <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=DataGrid}" />
                                <Binding Source="{StaticResource rulesEngine}" />
                            </MultiBinding>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataGrid.CellStyle>
        </DataGrid>

    Use the following code to add a collapsible panel using C1Expander to show the Rules Manager control.

    XAML
    Copy Code 
    <c1:C1Expander Header="RulesManager" ExpandDirection="Left" ExpandIconAlignment="Left" HorizontalContentAlignment="Right" BorderThickness="0" Grid.Column="1">
    <c1:C1RulesManager x:Name="rulesManager" Engine="{StaticResource rulesEngine}" Width="400"/>
</c1:C1Expander>